<template>
	<view class="container">
		<view class="search-box">
			<u-search :clearabled="true" shape="round" :show-action="true" @click="toAddPhoneBook()"></u-search>
		</view>
		<view class="title">
			<table class="table">
				<tr>
					<td class="table-newfriend">
						<image src="../../static/friend_add.png" mode="aspectFill"></image>
					</td>
					<td @click="readPhoneBook()">
						<navigator url="../addPhoneBook/addPhoneBook">新的朋友</navigator>
					</td>
				</tr>
				<tr>
					<td class="table-group">
						<image src="../../static/group.png" mode="aspectFill"></image>
					</td>
					<td @click="showToast()">群聊</td>
				</tr>
			</table>
			<block v-for="(item,index) in list" :key="index">
				<view>{{item.displayName}}</view>
				<block v-for="(subitem,idx) in item.phoneNumbers" :key="idx">
					<view>{{subitem.value}}</view>
				</block>
			</block>
			<view class="" v-for="(item,index) in alphabet" :key="index">
				<view class="alphabet-text col-12" v-text="item"></view>
				<table class="table">
					<tr>
						<td class="user-one">
							<image :src="'../../static/userphoto/A_'+(index+1)+'.png'" mode="aspectFill"></image>
						</td>
						<td>朋友{{item}}</td>
					</tr>
					<tr>
						<td class="user-two">
							<image :src="'../../static/userphoto/A_'+(index+2)+'.png'" mode="aspectFill"></image>
						</td>
						<td>朋友{{index}}</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alphabet: [],
				list: [],
				userphoto: [
					'../../static/userphoto/A_1.png',
					'../../static/userphoto/A_2.png',
					'../../static/userphoto/A_3.png',
					'../../static/userphoto/A_4.png',
					'../../static/userphoto/A_5.png',
					'../../static/userphoto/A_6.png',
					'../../static/userphoto/A_7.png',
					'../../static/userphoto/A_8.png',
					'../../static/userphoto/A_10.png',
					'../../static/userphoto/A_11.png',
				],
				indexList: []
			}
		},
		mounted() {
			this.pushAlphabet()
			this.loadmore()
		},
		methods: {
			showToast() {
				uni.showToast({
					title: '功能暂未开通，敬请期待',
					duration: 2000,
					icon: "success"
				})
			},
			pushAlphabet() {
				for (var i = 0; i < 26; i++) {
					this.alphabet.push(String.fromCharCode(65 + i))
				};
			},
			readPhoneBook() {
				uni.showToast({
					title: '开始获取联系人',
					duration: 2000,
					icon: "loading"
				})
				var that = this
				// 获取通讯录对象
				plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
					uni.showToast({
						title: '获取通讯录对象成功',
						duration: 2000
					})
					console.log('获取通讯录对象成功')
					console.log(addressbook)
					// 查找联系人
					addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
						uni.showToast({
							title: '获取联系人成功',
							duration: 2000
						})
						console.log('获取联系人成功')
						console.log(JSON.stringify(contacts))
						that.list = contacts
					}, function() {
						uni.showToast({
							title: '获取联系人失败',
							duration: 2000,
							icon: "error"
						})
					}, {
						multiple: true
					});
				}, function(e) {
					uni.showToast({
						title: '获取通讯录对象失败:' + e.message,
						duration: 2000,
						icon: "error"
					})
				});
			},
			toAddPhoneBook() {
				uni.navigateTo({
					url: "../addPhoneBook/addPhoneBook"
				})
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.userphoto[uni.$u.random(0,this.userphoto.length - 1)]
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "phoneBook.scss";
</style>
